<template>
  <div>
    <el-dialog
      :visible.sync="visible"
      append-to-body
      :title="title"
      :close-on-click-modal="false"
    >
      <el-form
        ref="elFormRef"
        :model="form"
        :rules="rules"
        label-width="auto"
      >

        <el-form-item prop="test_title" label="小测标题">
          <el-input v-model="form.test_title" placeholder="请填写小测标题" />
        </el-form-item>

        <el-form-item prop="pass_rate" label="及格线(%)">
          <el-input-number v-model="form.pass_rate" :min="1" :max="100" />
        </el-form-item>

        <el-form-item prop="data" label="题目">
          <el-button type="text" @click="openAddTopicDialog">{{ topicText }}</el-button>
        </el-form-item>

      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" :loading="loading" @click="createTest">确定</el-button>
      </div>
    </el-dialog>

    <TopicDialog
      v-model="topicDialogCfg.visible"
      :topic-type="questionType"
      :topic-list="topicDialogCfg.backup"
      @onConfirm="addTopicConfirm"
    />
  </div>

</template>
<script>
import { getTestQuestionType } from '@/api/examination'

import TopicDialog from './TopicDialog.vue'
import { cloneDeep } from 'lodash-es'
const topicValidator = (rule, value, callback) => {
  if (value.length <= 0) {
    callback(new Error('请至少添加一道题目'))
  } else {
    callback()
  }
}
export default {
  name: '',
  components: {
    TopicDialog
  },
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        test_title: '',
        pass_rate: 60,
        data: []
      },
      rules: {
        test_title: [{ required: true, message: '请填写小测标题', trigger: ['change', 'blur'] }],
        pass_rate: [{ required: true, message: '请填写及格线', trigger: ['change', 'blur'] }],
        data: [{ required: true, validator: topicValidator }]
      },
      title: '添加测试题',
      questionType: [],
      topicDialogCfg: {
        visible: false,
        backup: null
      },
      loading: false

    }
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    },
    topicText() {
      const len = this.form.data.length
      return len <= 0 ? '添加题目' : `已添加${len}道题目`
    }
  },
  created() {
    this.init()
  },
  methods: {

    setDefaultValue(val) {
      this.$nextTick(() => {
        this.form = val
      })
    },

    resetFields() {
      this.$nextTick(() => {
        this.$refs.elFormRef.resetFields()
      })
    },

    init() {
      this.getTestQuestionType()
    },

    async getTestQuestionType() {
      try {
        const res = await getTestQuestionType()
        this.questionType = res.data.map(v => ({ value: v.id, label: v.name }))
      } catch (error) {
        throw new Error(error)
      }
    },

    openAddTopicDialog() {
      this.topicDialogCfg.backup = cloneDeep(this.form.data)
      this.topicDialogCfg.visible = true
    },

    addTopicConfirm(e) {
      this.form.data = e
      this.$refs.elFormRef.validateField('data')
    },

    validate() {
      return new Promise((resolve, reject) => {
        this.$refs.elFormRef.validate(flag => {
          resolve(flag)
        })
      })
    },

    close() {
      this.$emit('input', false)
    },

    async createTest() {
      try {
        const flag = await this.validate()
        if (!flag) return

        this.$emit('onConfirm', this.generateParams())
        this.close()
      } catch (error) {
        throw new Error(error)
      }
    },

    generateParams() {
      const { pass_rate, data, test_title } = this.form
      return {
        pass_rate,
        test_title,
        data
      }
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
